@preName: .customTag;

@{preName} {
    :global{
        @{preName}-tag {
            display: inline-block;
            box-sizing: border-box;
            list-style: none;
            padding: 0 7px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 1;
            font-size: 12px;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            color: rgba(0,0,0,.65);
            line-height: 20px;
        }

        @{preName}-magenta {
            color: #eb2f96;
            background: #fff0f6;
            border-color: #ffadd2;
        }

        @{preName}-red {
            color: #f5222d;
            background: #fff1f0;
            border-color: #ffa39e;
        }
        @{preName}-volcano {
            color: #fa541c;
            background: #fff2e8;
            border-color: #ffbb96;
        }
        @{preName}-orange {
            color: #fa8c16;
            background: #fff7e6;
            border-color: #ffd591;
        }
        @{preName}-gold {
            color: #faad14;
            background: #fffbe6;
            border-color: #ffe58f;
        }
        @{preName}-lime {
            color: #a0d911;
            background: #fcffe6;
            border-color: #eaff8f;
        }
        @{preName}-green {
            color: #52c41a;
            background: #f6ffed;
            border-color: #b7eb8f;
        }
        @{preName}-cyan {
            color: #13c2c2;
            background: #e6fffb;
            border-color: #87e8de;
        }
        @{preName}-blue {
            color: #1890ff;
            background: #e6f7ff;
            border-color: #91d5ff;
        }
        @{preName}-geekblue {
            color: #2f54eb;
            background: #f0f5ff;
            border-color: #adc6ff;
        }
        @{preName}-purple {
            color: #722ed1;
            background: #f9f0ff;
            border-color: #d3adf7;
        }
    }
}